<template>
    <div class="p-2">
        <el-card shadow="never">
            <template #header>
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-form-item label="产品名称：" prop="welfareName">
                        <el-input v-model="queryParams.welfareName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <el-table v-loading="loading" :data="dataList" stripe>
                <el-table-column label="申请人" prop="createByName" align="center"></el-table-column>
                <el-table-column label="申请日期" prop="createTime" align="center"></el-table-column>
                <el-table-column label="采购单号" prop="purchaseApplyId" align="center"></el-table-column>
                <el-table-column label="产品名称" prop="welfareName" align="center"></el-table-column>
                <el-table-column label="单价" prop="price" align="center"></el-table-column>
                <el-table-column label="申请数量" prop="applyNumber" align="center"></el-table-column>
                <el-table-column label="入库数量" prop="purchaseNumber" align="center"></el-table-column>
                <el-table-column label="总价" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.purchaseNumber">
                            {{ Number(scope.row.purchaseNumber) * Number(scope.row.price) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="采购申请备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="审批" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.approvalStatus == 0" style="color: #F86A5D;">未编辑</span>
                        <span v-else-if="scope.row.approvalStatus == 1" style="color: #7ECB59;">已编辑</span>
                        <span v-else-if="scope.row.approvalStatus == 2" style="color: #7ECB59;">已通过</span>
                        <span v-else-if="scope.row.approvalStatus == 3" style="color: #F86A5D;">已拒绝</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库状态" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.inStatus == 0" style="color: #F86A5D;">未入库</span>
                        <span v-else-if="scope.row.inStatus == 1" style="color: #E7A646;">部分入库</span>
                        <span v-else-if="scope.row.inStatus == 2" style="color: #7ECB59;">已入库</span>
                    </template>
                </el-table-column>
                <el-table-column label="对账状态" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.reconciliationFlag == 0" style="color: #F86A5D;">未对账</span>
                        <span v-else-if="scope.row.reconciliationFlag == 1" style="color: #7ECB59;">已对账</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="220px">
                    <template #default="scope">
                        <el-tooltip content="编辑">
                            <el-button @click="handleEditClick(scope.row)" link :style="{ fontSize: '15px' }"
                                type="primary" icon="EditPen"></el-button>
                        </el-tooltip>
                        <el-tooltip content="审批" placement="top">
                            <el-button @click="handleOpenApproval(scope.row)" link :style="{ fontSize: '15px' }"
                                type="success" icon="Document"></el-button>
                        </el-tooltip>
                        <el-tooltip content="入库">
                            <el-button link :style="{ fontSize: '15px' }" type="success" icon="Back"
                                @click="handleOpenLibrary(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="对账" placement="top">
                            <el-button @click="handleOpenApply(scope.row)" link :style="{ fontSize: '15px' }"
                                type="success" icon="Money"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除">
                            <el-button @click="deleteList(scope.row)" link :style="{ fontSize: '15px' }" type="danger"
                                icon="Delete"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>

            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>

        <!-- 编辑 -->
        <WelfareEditor :visible="editorVisible" :initList="editirObj" @close="editorVisible = false"
            @submit="getList" />
        <!-- 审批 -->
        <Approval :visible="approvalVisible" :initList="approvalObj" @close="approvalVisible = false"
            @submit="getList" />
        <!-- 入库 -->
        <WarehouseEntry :visible="libraryVisible" :initList="libraryObj" @close="libraryVisible = false"
            @submit="getList" />
        <!-- 对账 -->
        <WelfareReconciliation :visible="applyVisible" :initList="applyObj" @close="applyVisible = false"
            @submit="getList" />
    </div>
</template>
<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { getWelfareProcurementList, deleteWelfareProcurementApi } from '@/api/sj/purchaseManagement/welfareProcurement/index'

/** 审批 */
import Approval from './components/approval.vue'
import useApproval from '@/hooks/purchaseManagement/welfareProcurement/useApproval'

/** 编辑 */
import WelfareEditor from './components/welfareEditor.vue'
import useWelfareEditor from '@/hooks/purchaseManagement/welfareProcurement/useWelfareEditor'

/** 入库 */
import WarehouseEntry from './components/warehouseEntry.vue'
import useWarehouseEntry from '@/hooks/purchaseManagement/welfareProcurement/useWarehouseEntry'

/** 对账 */
import WelfareReconciliation from './components/welfareReconciliation.vue'
import useWelfareReconciliation from '@/hooks/purchaseManagement/welfareProcurement/useWelfareReconciliation'
const { libraryVisible, libraryObj, handleOpenLibrary } = useWarehouseEntry();

const { editorVisible, editirObj, handleEditClick } = useWelfareEditor();

const { approvalVisible, approvalObj, handleOpenApproval } = useApproval();

const { applyVisible, applyObj, handleOpenApply } = useWelfareReconciliation();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const queryFormRef = ref<FormInstance>();

const data = reactive<pageDataOnlyQuery<any>>({
    queryParams: {
        welfareName: '',
        pageSize: 10,
        pageNum: 1
    }
});

const { queryParams } = toRefs(data);

const loading = ref(false);
const dataList = ref<any>([]);
const totalData = ref(0);

const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

/** 列表删除 */
const deleteList = (row: any) => {
    if (row.approvalStatus === '0' || row.approvalStatus === '3') {
        ElMessageBox.confirm('此条福利采购信息会被彻底删除，您确定么？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(async () => {
                try {
                    const { code } = await deleteWelfareProcurementApi(row.id)
                    if (code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!'
                        });
                        getList()
                    }
                } catch (error) {

                }

            })
            .catch(() => { });
    } else {
        proxy?.$modal.msgError('福利采购订单以编辑，无法删除!')
    }
};

const getList = async () => {
    try {
        const { code, rows, total } = await getWelfareProcurementList(queryParams.value)

        dataList.value = rows;
        totalData.value = total;
    } catch (error) {

    }
};

onMounted(() => {
    getList();
});

</script>
<style lang="scss" scoped></style>